VOS - de dispatcher
Home

VOS - de dispatcher

VOS - de dispatcher

Dispatching is het process waarbij een event dat door de gebruiker word afgevuurd, onderschept wordt en geanalyseerd in een entiteitsnaam (zelfstandig naamwoord) en een actienaam (werkwoord). De dispatcher zorgt er tenslotte voor dat de juiste code wordt uitgevoerd. In de praktijk komt dat erop neer dat elk event overeenkomt met use case en dat de dispatcher ervoor zorgt dat de overeenkomstige code wordt uitgevoerd.

Het MVC patroon

Als basis voor de dispatcher laten we ons inspireren door het MVC pattern (MVC toepassen in JS).

Use cases

De dispatcher moet alle use cases afhandelen. We beginnen dus met het opsommen van de use cases:

We koppelen die aan de UI elementen in de html. Deze eerste use cases bevinden zich allemaal op de Home/Index pagina. In het name attribuut geven we aan dat het om een use case gaat door dit attribuut in te stellen op de waarde uc. In ons CSS tower-pattern komt een floor overeen met een view:

<body>
    <div id="tower" class="tower">
        <!-- elke floor komt overeen met één view -->
        <div class="floor" id="home-index">
            <header class="front">
                <nav class="control-panel">
                    <button class="tile" name="uc" value="home/index">
                    <span class="icon-menu2"></span>
                    <span class="screen-reader-text">Home</span>
                </button>
                </nav>
                <h1>veilig<br/><span>op school</span></h1>
            </header>
            <div class="show-room index" id="home">
            </button>
                <button class="tile" name="uc" value="home/login">
                <span class="icon-enter"></span>
                <span class="screen-reader-text">Login</span>
            </button>
            <button class="tile" name="uc" value="fire/index">
                <span class="icon-fire"></span>
                <span class="screen-reader-text">Brand</span>
            </button>
            ...
        </div>
    </div>
</body>

De dispatcher 1ste versie

We laten alle klik-events opborrelen tot aan het HTML document element en vangen die op in een addEventListnerer die we toevoegen in de onload eventafhandelaar:

<script>
    window.onload = function() {
        // als we JSON bestanden gewijzigd hebben
        // moeten we de localStorage eerst leeg maken
        // anders wordt de nieuwe versie niet geladen
        clearLocalStorage();
        loadData();
        document.body.addEventListener('click', appDispatcher, false);
    }
    // bij het openen van de website wordt de home-index view getoond
    window.location.href = '#home-index';
</script>

De dispatcher methode analyseert van welk html element het klik-event afkomstig is en welke use case moet worden uitgevoerd. Op basis daarvan wordt de geschikte controller methode opgeroepen.

Deze methode staat in het bestand met de naam js/vos.js:

/**
 * Dispath methode die de use case uitvoert die overeenkomt
 * met een de gevraagde interactie van de gebruiker.
 *
 * @param {object} e verwijzing naar het dom element dat het event heeft afgevuurd.
 */
var dispatcher = function (e) {
    var target = e.target;
    var steps = 0;
    while (target.getAttribute('name') !== 'uc' && steps < 5 && target.tagName !== 'BODY') {
        target = target.parentNode;
        steps++;
    }
    if (target.getAttribute('name') === 'uc') {
        var uc = target.getAttribute('value');
        var path = uc.split('/');
        var entity = path[0] === undefined ? 'none' : path[0];
        var action = path[1] === undefined ? 'none' : path[1];
        var view = entity + '-' + action;
        // alert (entity + '/' + action);
        if (controller[entity][action]) {
            controller[entity][action]();
        } else {
            alert('ongeldige url ' + uc);
        }
    }
};

JI
2017-12-15 15:13:52